//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import {
  increment,
  reduce,
  incrementAsync
} from '../../redux/actions/count'
import React, { Component } from 'react'

class Count extends Component {
  state = {carName: "奥迪"}
  reduce = ()=>{
    const {value} = this.selectNumber
    this.props.reduce(value*1)
  }
  increment = ()=>{
    const {value} = this.selectNumber
    this.props.increment(value*1)
  }
  incrementIfOdd = ()=>{
    const {value} = this.selectNumber
    if(this.props.count % 2 !== 0){
      this.props.increment(value*1)
    }
  }
  incrementAsync = ()=>{
    const {value} = this.selectNumber
    this.props.incrementAsync(value*1,500)
  }
  
  render() {
    console.log('222',this.props)
    return <div>
        <h2>我是Count组件,下方组件的人数为：{this.props.persons}</h2>
        <h4>总数求和为：{this.props.count}</h4>&nbsp;
        <select ref={c => this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.reduce}>-</button>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.incrementIfOdd}>incrementIfOdd</button>&nbsp;
        <button onClick={this.incrementAsync}>incrementAsync</button>
    </div>;
  }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state => ({count: state.count,persons: state.persons.length}),
    {increment,reduce,incrementAsync}
)(Count)
